<template>
    <div>
        <div class="open">
            <b-ace-editor
                v-model="state.modelValue"
                theme="chrome"
                lang="json"
                :width="width"
                :height="height"
            ></b-ace-editor>
            <Button style="margin-left: 4px" @click="state.show=true"  icon="ios-open"></Button>
        </div>
        <el-dialog
            v-model="state.show"
            width="80%" top="20px" align-center
            :title="'编辑'+title"
        >
            <b-ace-editor
                v-model="state.modelValue"
                theme="chrome"
                lang="json"
                width="100%"
                height="100%"
            ></b-ace-editor>
        </el-dialog>
    </div>
</template>

<script setup>
    import {reactive, watch} from "vue";

    const emits = defineEmits(['update:modelValue'])
    const props = defineProps({
        title: {
            type: String,
            default: "内容"
        },
        modelValue: {
            type: String,
            default: null
        },
        width: {
            type: [String, Number],
            default: "100%"
        },
        height: {
            type: [String, Number],
            default: "60"
        }
    })
    const state = reactive({
        show: false,
        modelValue: null,
    });

    watch(() => props.modelValue, newValue => {
        state.modelValue = newValue
    }, {immediate: true});

    watch(() => state.modelValue, newValue => {
        emits('update:modelValue', newValue)
    }, {immediate: true});

</script>
<style scoped>
.open{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
</style>